<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>轮播图管理</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <script type="text/javascript" src="../../static/js/tool.js"></script>
    <script type="text/javascript" src="../../lib/vuedraggable/Sortable.js"></script>

    <style type="text/css">
        html,
        body,
        #app,
        .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }

        .el-main {
            padding: 4px;
        }

        .el-modal--box {
            width: 600px !important;
        }

        .el-form {
            text-align: center !important;
            width: 96%;
        }

        .el-row>.el-col--12 {
            width: 100%;
        }

        .el-form-item {
            display: flex;
            width: 100%;
            justify-content: space-between;
        }

        .el-form-item__label {
            width: 72px;
            text-align: center;
        }

        .el-form-item__content {
            flex: 1;
        }

        .avatar-uploader {
            text-align: start;
        }

        .el-modal--body {
            display: flex !important;
            /* flex-direction: column !important; */
            align-items: center !important;
        }

        .el-modal--content {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
        }

        .upload-demo {
            margin-bottom: 8px;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 148px;
            height: 148px;
            line-height: 148px;
            text-align: center;
        }

        .avatar {
            width: 148px;
            height: 148px;
            display: block;
        }

        .vxe-body--column {
            text-align: center !important;
        }

        .el-button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 78px;
            height: 30px;
            margin-bottom: 3px;
        }

        .btn {
            /* text-align: end !important; */
            display: flex;
            justify-content: end;
        }

        .el-message-box__btns {
            display: flex;
            justify-content: end;
        }

        #app::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        #app {
            -ms-overflow-style: none;
            scrollbar-width: none;
            overflow: auto;
            max-height: 100%;
        }

        input {
            border-color: #dcdfe6;
            border: 1px solid #dcdfe6
        }
    </style>

<body>
    <el-container id="app">
        <!-- 图片 -->
        <div class="pic" id="pic"
            style="width:96%; margin: 0 auto; height:680px;display: flex; flex-direction: column; padding: 10px 0;align-items: left; ">

            <div class="serch" style="margin-top: 10px;z-index: 10; font-size: 14px;">
                分类查询： <vxe-select v-model="val" size="mini" placeholder="请选择图片类型"
                    style="width: 127px;position: relative; z-index: 11;" @change="handleSelectTopChange">
                    <vxe-option v-for="(itemo,inde) in dictList" :key="inde" :value="itemo.label" :label="itemo.label">
                    </vxe-option>
                </vxe-select>
            </div>

            <div id="foo" style="display: flex; justify-content: left; flex-wrap: wrap; overflow: auto;height: 580px; ">
                <div style=" width: 170px;height: 196px;margin-left: 20px;margin-top: 10px;text-align: center;"
                    v-for="(item,index) in imgList">
                    <div style="width: 95%;height: 118px;margin-left: 5px;margin-top: 5px;position: relative;"
                        @click="lookBigImage(item.picUrl)" title="查看大图">
                        <img :src="item.picUrl" style="width: 162px;height: 118px;" />
                        <!-- <img v-else :src="item.picUrl" style="width: 162px;height: 118px;" /> -->
                        <div
                            style="width: 20px;height: 20px;background-color: red;position: absolute; left: 0px;top: 0px;text-align: center;line-height: 20px;color: white;">
                            {{index+1}}
                        </div>
                    </div>
                    <div class="link" style="font-size: 12px; display: flex; width: 100%;margin-top: 8px;">
                        <!-- <span>图片链接：</span> -->
                        <input style="width: 90%; margin: 0 auto; text-decoration: none; outline: none;" type="text"
                            placeholder="请输入图片链接" v-model="item.picLink" @input="picLink = item.picLink">
                    </div>
                    <div style="width: 50%;height: 17%;margin-left: 5%;margin-top: 10px;float: left;">
                        <vxe-select v-model="item.picType" size="mini" placeholder="请选择图片类型"
                            style="width: 127px;z-index: 1;" @change="handleSelectChange">
                            <vxe-option v-for="(itemo,inde) in dictList" :key="inde" :value="itemo.label"
                                :label="itemo.label">
                            </vxe-option>
                        </vxe-select>
                    </div>
                    <!-- 删除 -->
                    <label @click="cutImage(item.id)" style="cursor: pointer;"><i
                            style="margin-left: 55px;margin-top: 15px;" class="el-icon-delete"></i></label>
                </div>

            </div>
            <!-- 查看图片 -->
            <el-dialog :visible.sync="dialogVisible" width="878px" :center="true" top="10vh" :lock-scroll='false'
                :before-close="handleClose">
                <span>
                    <img :src="bigImgUrl" style="height: 552px;width: 830px;" />
                </span>
            </el-dialog>
            <!-- 上传 -->
            <div style="width: 100%; margin-top: 10px;display: flex; justify-content: end;">
                <el-upload class="upload-demo" :action="uploadPort" :on-remove="handleRemove" :on-success="fileSuccess"
                    :on-error="fileError" multiple limit="100" :draggable=true :show-file-list="false"
                    :on-exceed="handleExceed" :file-list="fileList">
                    <el-button size="small" type="primary" style="color: white;width: 100px;" icon="el-icon-folder">
                        选择图片上传
                    </el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
                <el-button @click="add()" type="primary" size="mini" icon="el-icon-folder" style="margin-left: 5px;">提交
                </el-button>
            </div>
            <div style="display: flex; justify-content: left;">
                <div style="width: 100%; display: flex; justify-content: left;">
                    <vxe-pager style="width: 100%; text-align: left;" background size="small"
                        :current-page="currentPage" :page-size="pageSize" :total="totalSize"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30]"
                        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']">
                    </vxe-pager>
                </div>

            </div>
        </div>

    </el-container>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            totalPage: 0,
            totalSize: "",
            currentPage: 1,
            pageSize: 30,
            val: "导览端轮播图",
            bigImgUrl: '', //大图路径
            dialogImgUrl: null,
            picType: "",
            srcList: [], //解约上传图片图片预览数据
            imgList: [],
            tempImgList: [],
            url: "",
            id: "",
            picLink: "",
            picUrl: "",
            picName: "",
            sort: "",
            newItem: {
                id: '',
                picName: "",
                picLink: "",
                picUrl: "",
                sort: "",
                picType: ""
            },
            dictList: [],
            // picType: "",
            keyword: "",
            showImgPreview: false, //是否显示图片预览窗口
            showImgPreviewSrc: "", //预览图片内容
            swiperList: [], //轮播图列表
            guide: false,
            disabled: false,
            fileList: [], //上传之后返回的文件路径列表
            uploadPort: curlFinance + '/attach/uploadAtt', //图片上传接口
            headers: {
                token: ''
            },
            dialogImageUrl: '',
            dialogVisible: false,

        },
        created() {
            this.headers.token = getCookie('token');

            this.getDict()
            this.picType = this.val
            this.getSwiperList()
        },
        mounted() {
            setTimeout(() => {
                this.getSortable();
            }, 3000)
            // this.getDict()
            // console.log(111, this.dictList);
        },
        methods: {
            getSortable() {
                var foo = document.getElementById('foo');
                var that = this
                new Sortable(foo, {
                    //Sortable.create(document.getElementById('foo'), {
                    swapThreshold: 1,
                    animation: 150,
                    fallbackOnBody: true,
                    onUpdate: function (event) {
                        var newIndex = event.newIndex,
                            oldIndex = event.oldIndex
                        $li = foo.children[newIndex],
                            $oldLi = foo.children[oldIndex]
                        // 先删除移动的节点
                        foo.removeChild($li)
                        // 再插入移动的节点到原有节点，还原了移动的操作
                        if (newIndex > oldIndex) {
                            foo.insertBefore($li, $oldLi)
                        } else {
                            foo.insertBefore($li, $oldLi.nextSibling)
                        }
                        // 更新items数组
                        var item = that.imgList.splice(oldIndex, 1)
                        that.imgList.splice(newIndex, 0, item[0])
                        // console.log(that.imgList);
                    },
                });
            },
            //    增加
            add() {
                let that = this;
                let queryParams = [...this.imgList];
                // console.log("queryParams", queryParams);
                this.imgList.forEach((item, index) => {
                    item.sort = index + 1;
                });
                let allFieldsFilled = queryParams.every(item => {
                    return item.picLink && item.picName && item.picType && item.picUrl;
                });

                if (!allFieldsFilled) {
                    vm.$XModal.message({
                        message: "请完整填写信息再提交！",
                        status: "warning",
                    });
                    return; // 如果验证失败，则退出函数
                }

                for (let i = 0; i < queryParams.length; i++) {
                    queryParams[i].sort = i + 1;
                }

                webApi("/comm/saveLunBo", "post", queryParams, function (data) {
                    if (data.code == 200) {
                        that.getSwiperList();
                        vm.$XModal.message({
                            message: "保存成功",
                            status: "success",
                        });
                    } else {
                        vm.$XModal.message({
                            message: "哦豁，请求错误，请刷新重试一下！",
                            status: "warning",
                        });
                    }
                });
            },
            handleSelectTopChange(topDic) {
                this.picType = topDic.value
                console.log("topDic", this.picType);

                this.getSwiperList()

            },
            handleSelectChange(dic) {
                // console.log("dic", dic);
                // this.picType = dic.value
                this.newItem.picName = dic.value
                this.newItem.picType = dic.value
            },
            //打开查看大图对话框
            lookBigImage(url) {
                this.dialogVisible = true;

                this.bigImgUrl = url;
                console.log("this.bigImgUrl", this.bigImgUrl);

            },
            //关闭查看大图对话框
            handleClose(done) {
                done();
            },
            //文件上传移除事件
            cutImage(index) {
                let that = this
                let ids = []
                ids.push(index)
                // console.log("删除", ids);
                let modal = this.$XModal.confirm('确认删除这张图片吗？').then(type => {
                    if (type == 'confirm') {
                        // that.imgList.splice(index, 1);
                        let queryParams = {
                            ids: ids
                        }
                        webApi("/comm/delLunBo", "post", queryParams, function (data) {
                            if (data.code == 200) {
                                that.getSwiperList()
                                vm.$XModal.message({
                                    message: "删除成功",
                                    status: 'success'
                                })

                            } else {
                                vm.$XModal.message({
                                    message: "哦豁，请求失败，请刷新重试一下！",
                                    status: 'warning'
                                })
                            }
                        }, function (data) {

                        });
                        // this.allDel()
                    }
                })
                // modal.style.zIndex = 999;
            },
            imgPreview: function (src) {
                // console.log("src", src);
                this.showImgPreviewSrc = src;
                this.showImgPreview = true;
            },
            closeImgPreview: function () {
                this.showImgPreview = false;
            },
            handleOnPreview(file) {
                // console.log("file", file);
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //图片上传未完成上传成功的事件
            fileError(err, file, fileList) {
                this.$message.warning(`当前有 ${fileList.length} 个文件没有上传成功`);
            },
            handleRemove(file, fileList) {
                this.fileListArray = fileList;
                for (var i in this.srcList) {
                    if (file.url == this.srcList[i]) {
                        this.srcList.splice(i, 1);
                    }
                }
                this.dialogImgUrl = this.srcList[0];
            },
            // 获取字典
            getDict() {
                let queryParams = {
                    dictId: 25
                }
                webApi("/dict/getDictDetailTreeList", "post", queryParams, (data) => {
                    if (data.code == 200) {
                        this.dictList = data.data;
                        console.log("dictList ", this.dictList);
                    } else {
                        vm.$XModal.message({
                            message: "哦豁，获取列表失败，请刷新重试一下！",
                            status: 'warning'
                        });
                    }

                    // object.getDepartOptions();
                }, function (data) {

                });
            },
            //文件上传内容开始
            fileSuccess(res, file, fileList) {
                //main.imgList = [];
                //文件上传成功回调   pictureInfoString
                if (res.code == 200) {
                    console.log("res", res);
                    // var viewUrl = file.response.data.viewUrl;
                    // var url = imgurl + viewUrl;
                    // this.url = url
                    // console.log("url", url);
                    this.picUrl = res.data.url

                    if (file.response.code == 200) {
                        // console.log("Current picType value:", this.picType);
                        this.newItem.picName = this.picType;
                        this.newItem.picLink = this.picLink;
                        this.newItem.picUrl = this.picUrl;
                        this.newItem.sort = this.sort;
                        this.newItem.picType = this.picType;
                        // this.newItem = {
                        //     id: '',
                        //     picName: this.picType,
                        //     picLink: this.picLink,
                        //     picUrl: url,
                        //     sort: this.sort,
                        //     picType: this.picType
                        // };
                        let imgListItem = {
                            id: '',
                            picName: res.data.original,
                            picLink: this.picLink,
                            picUrl: this.picUrl,
                            sort: this.sort,
                            picType: this.picType
                        };
                        this.imgList.push(imgListItem);
                        // this.imgList.map(function (item) {
                        //     console.log(111, item);
                        // })

                    }
                    console.log("imgList", this.imgList);
                    // console.log("tempImgList", this.tempImgList);


                }
            },
            handleExceed(files, fileList) {
                this.$message.warning(
                    `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            // swiper列表
            getSwiperList() {
                var that = this
                let queryParams = {
                    // picName: that.formData.pic_name,
                    picType: that.picType,
                    picName: that.picName,
                    page: this.currentPage,
                    rows: this.pageSize,   //每页条数
                }
                webApi("/comm/getLunBoList", "post", queryParams, function (data) {
                    if (data.code == 200) {
                        // console.log(111, data);
                        that.swiperList = data.data.list
                        that.imgList = data.data.list
                        that.totalSize = data.data.total
                        // console.log(111, that.swiperList);
                    } else {
                        vm.$XModal.message({
                            message: "哦豁，获取列表失败，请刷新重试一下！",
                            status: 'warning'
                        })
                    }

                    // object.getDepartOptions();
                }, function (data) {

                });
            },
            query() {
                vm.currentPage = 1;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getSwiperList()
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getSwiperList()
            },

        }
    })
    window.onload = function () {

    }



</script>

</html>